<template>
  <div>
    <!-- 最外层容器 -->
    <el-container>
      <!-- 顶栏 -->
      <el-header class="layout-header">
        <el-row :gutter="24">
         <el-col :span="6" align="center">
           <h1 style="font-size: 30px">来客平台</h1>
         </el-col>
         <el-col :span="12">
           <el-menu router
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    background-color="#303244"
                    active-text-color="#303244"
                    mode="horizontal">
             <el-menu-item index="/index">点菜</el-menu-item>
             <el-menu-item index="/call-number">叫号</el-menu-item>
             <el-menu-item index="/take-orders">接单</el-menu-item>
             <el-menu-item index="/check-orders">确认订单</el-menu-item>
             <el-menu-item index="/completed-orders">历史订单</el-menu-item>
             <el-menu-item index="/cash-register">收银</el-menu-item>
           </el-menu>
         </el-col>
         <el-col :span="6" align="right">
           <el-dropdown @command="handleCommand">
           <h1><i class="el-icon-user" v-show="this.loginInfo !== null">欢迎回来，{{ this.loginInfo.username }}</i></h1>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item icon="el-icon-user" command="退出登录">退出登录</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
           <h1><i class="el-icon-user" @click="login">登录</i></h1>
         </el-col>
        </el-row>
      </el-header>
      <!-- 下半部分容器 -->
      <el-container class="layout-body">
        <el-main class="layout-main" >
          <div class="body">
            <!-- 页面的主体部分将由其它视图组件来显示 -->
            <router-view/>
          </div>
          <div class="copyright">
            <p>Copyright &copy;  公司名称：来客食堂食品股份有限公司  </p>
            <p> 公司地址：四川省成都市天府街道  |  电话：028-25099000</p>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
  data(){
    return{
      activeIndex: '',
      loginInfo:''
    }
  },
  methods:{
    login(){//点击登录按钮
      this.$router.push('/login')
    },
    handleCommand(){//选择退出登录选项
      this.$confirm('您确定退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = BaseUrl.PASSPORT+'/passport/logout';

        TokenAxios.post(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {//退出登录成功
            this.$message({
              message: '您已退出登录！',
              duration: 500,
              type: 'success'
            });
            localStorage.clear();
            this.$router.push('/login');//跳转首页
          } else {//其他情况
            this.$alert(jsonResult.message, '操作提示', {
              confirmButtonText: '确定',
              callback: action => {
              }
            })
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          duration: 500,
          message: '已取消操作！'
        });
      });

    },
    // 处理激活某个菜单项
    handleActiveMenuItem() {
      let path = this.$router.currentRoute.path;
      if (path.startsWith('/index')) {
        path = '/index';
      }
      if (path.startsWith('/call-number')) {
        path = '/call-number';
      }
      if (path.startsWith('/take-orders')) {
        path = '/take-orders';
      }
      if (path.startsWith('/check-orders')) {
        path = '/check-orders';
      }
      if (path.startsWith('/completed-orders')) {
        path = '/completed-orders';
      }
      if (path.startsWith('/cash-register')) {
        path = '/cash-register';
      }
      this.activeIndex = path;
    },
    loadLoginInfo() {
      let loginInfoString = localStorage.getItem('loginInfo');
      this.loginInfo = JSON.parse(loginInfoString);//字符串解析成json格式
      console.log(this.loginInfo);
    }
  },
  mounted() {
    this.loadLoginInfo();
    this.handleActiveMenuItem();
  }
}
</script>
<style>
body{margin: 0;}
/*头部样式*/
.layout-header {background: #303244; color: #fff;}
.layout-header h1{margin: 0;line-height: 60px;font-size: 20px;}
.layout-header .el-menu-item{font-size: 20px}
.el-menu-item.is-active {background: #db4c09 !important;}
/*右边主体样式*/
.layout-main { background: #ddd;}
.layout-main .body{ background: #fff; padding: 30px 30px 10px 30px;}
.layout-main .copyright p { color: #666; font-size: 11px; text-align: center;}
</style>
